<template> <!-- 题库 -->
	<view class="wrap">
		<view class="layout layout-bank">
			<view class="bank-box bg-white">
				<view class="bank-title">请选择要练习的题库</view>
				<view class="flex justify-between flex-wrap">
					<view class="item" v-for="(item,index) in bankList" :key="index" @click="roomLink(item.category_id)">
						<view class="name">{{ item.name }}</view>
						<view class="flex justify-center">
							<view class="inlne">
								<view class="nmb flex justify-start">
									<view class="between">题目数量：</view>
									<view class="between">{{ item.timu_num }}</view>
								</view>
								<view class="nmb flex justify-start">
									<view class="between">选择次数：</view>
									<view class="between">{{ item.choose_num }}</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	  import * as CategoryApi from '@/api/dati/category'
	export default {
		data() {
			return {
				bankList: [
				
				]
			};
		},
		methods: {
		// 获取文章分类数据
		getCategoryList(categoryId) {
		  CategoryApi.list_user().then(result => {
		    this.bankList=result.data.list
		  })
		},
		
		roomLink(id) {
			this.$u.route('/pagesNew/me/room?categoryId='+id)
		},
		
		},
		onLoad() {
			const app = this
			// 获取文章分类数据
			app.getCategoryList()
		}
	}
</script>

<style lang="scss">
	.layout-bank {
		padding: 36rpx 36rpx;
		.bank-box {
			padding: 36rpx 36rpx;
			border-radius: 10rpx;
			.item {
				margin-top: 36rpx;
				width: 300rpx;
				height: 140rpx;
				background: url('~@/static/image/bank.png') center no-repeat;
				background-size: 100% 100%;
				.name {
					margin-top: 10rpx;
					font-size: 36rpx;
					line-height: 48rpx;
					color: #fff;
					text-align: center;
				}
				.nmb {
					font-size: 28rpx;
					line-height: 32rpx;
					color: #fff;
				}
			}
			// .item:nth-child(1) {
			// 	margin-top: 0;
			// }
			// .item:nth-child(2) {
			// 	margin-top: 0;
			// }
		}
		.bank-title {
			font-size: 34rpx;
			font-weight: 500;
			line-height: 48rpx;
			color: #000000;
		}
	}
</style>
